<template>
  <custom-modal
    width="1200px"
    v-if="visible"
    :visible="visible"
    :title="''"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="visible = false"
    :bodyStyle="{ height: dialogBodyHeight + 'px', overflowY: 'auto' }"
    @changesize="getNewModalHeight"
    @full="handlerFull"
    class="lockRiskJumpModal">
    <template slot="footer">
      <a-button
        type="primary"
        @click.stop="
          () => {
            visible = false
          }
        ">{{ $t('back') }}</a-button>
    </template>
    <a-tabs v-model="tabActive" @change="switchTab" class="tabCommon" v-if="query">
      <a-tab-pane :tab="this.$t('taskOccupy')" key="lockFlag" v-if="query.vehicleId">
        <div class="tabContBox" :style="{height:tagPaneContHeight}">
          <lock ref="lockFlag" :vehicleId="query.vehicleId" v-if="tabActive === 'lockFlag'"></lock>
        </div>
      </a-tab-pane>
<!--      <a-tab-pane :tab="this.$t('versionRisk')" key="compatibleRisk" v-if="query.vehicleId && query.taskId">-->
<!--        <div class="tabContBox" :style="{height:tagPaneContHeight}">-->
<!--          <risk ref="compatibleRisk" :mainQuery="query" v-if="tabActive === 'compatibleRisk'"></risk>-->
<!--        </div>-->
<!--      </a-tab-pane>-->
      <a-tab-pane :tab="this.$t('taskQueueJump')" key="taskJump" v-if="query.vehicleId && query.taskId">
        <div class="tabContBox" :style="{height:tagPaneContHeight}">
          <jump ref="taskJump" :mainQuery="query" v-if="tabActive === 'taskJump'"></jump>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div v-else>{{ $t('noData') }}</div>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import Lock from './lock.vue'
import Risk from './risk.vue'
import Jump from './jump.vue'
export default {
  name: 'LockRiskJumpDialog',
  components: {
    CustomModal,
    Lock,
    Risk,
    Jump
  },
  data () {
    return {
      visible: false,
      tabActive: 'lockFlag',
      dialogBodyHeight: 600,
      prevDialogBodyHeight: 600
    }
  },
  computed: {
    tagPaneContHeight () {
      console.log((this.dialogBodyHeight - 60) + 'px', '2992494')
      return (this.dialogBodyHeight - 60) + 'px'
    }
  },
  props: {
    query: {
      type: Object,
      default () {
        return {
          // 任务id 风险、插队必要条件
          taskId: '',
          // 车辆id 风险、插队、占用必要条件
          vehicleId: ''
        }
      }
    }
  },
  methods: {
    switchTab (value) {
      this.tabActive = value
    },
    toggleVisible (val) {
      this.visible = val
    },
    getNewModalHeight () {
      const modalDomHeight = document.querySelector('.ant-modal').offsetHeight
      // 63是弹框footer高度加标题高度
      this.dialogBodyHeight = modalDomHeight - 63
      this.calcTbodyHeight()
    },
    handlerFull (bool) {
      if (bool) {
        // 全屏前记录当时高度
        this.prevDialogBodyHeight = this.dialogBodyHeight
        this.getNewModalHeight()
      } else {
        // 退出全屏还原上一次高度
        this.dialogBodyHeight = this.prevDialogBodyHeight
        this.calcTbodyHeight()
      }
    },
    // 重新计算组件内表格高度
    calcTbodyHeight () {
      this.$refs[this.tabActive].calcTbodyHeight()
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.tabContBox {
    padding:0px 24px 16px 24px;
}
</style>
<style lang="less">
.lockRiskJumpModal {
    .ant-modal-header {
        border-bottom: none;
        padding: 5px;
    }

    .ant-tabs-nav-container {
        padding: 0px 24px;
    }

    .ant-modal-body {
        padding: 0 !important;
    }

    .tabCommon {
        .ant-tabs-bar {
            border-bottom: 1px solid @borderColor;
        }
    }
}
</style>
